<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>aside元素</title>
	</head>
	<body>
		<header>
			<h1>js入门</h1>	
		</header>
		<article>
			<h1>语法</h1>
			<p>文章的正文。。。。</p>
			<aside>
				<h1>名词解释</h1>
				<p>语法：这是重要的语言</p>
			</aside>
		</article>
		<aside>
			<nav>
				<h2>评论</h2>
				<ul>
					<li><a href="#">2015-03-10</a></li>
					<li><a href="#">某某：学习</a></li>
				</ul>
			</nav>
		</aside>
		<time datetime="2015-10-10">2015-10-10</time>
		<time datetime="2015-10-10T20:00">2015-10-10</time>
		<time datetime="2015-10-10T20:00Z">2015-10-10</time>
		<time datetime="2015-10-10T20:00+09:00">2015-10-10</time>
	</body>
</html>


<style type="text/css">
	
	header {
	    background-color: #fff;
	    width: 100%;
		height: 80px;
	    position: fixed;
	    top: 10px;
	    left: 0;
	    bottom: 0px;
	    z-index: 3;
	    display: flex;
	    justify-content: center;
	    align-items: center;
	    box-shadow: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23);
	}
	
	aside {
	    background-color: #fff;
	    width:20%;
	    position: fixed;
	    top: 55px;
	    left: 0;
	    bottom: 0px;
	    z-index: 1;
	    display: flex;
	    justify-content: center;
	    align-items: center;
	    box-shadow: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23);
	}
	
	
	article {
		background-color: #fff;
		width: 80%;
		position: fixed;
		top: 55px;
		left: 300px;
		bottom: 0px;
		z-index: 1;
		display: flex;
		justify-content: center;
		align-items: center;
		box-shadow: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23);
	}
</style>

